<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.8.4/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.8.4/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/babel">
      // 定义组件(必须继承)
      class Demo extends React.Component {
        state = {
          isHot: true,
        };
        // constructor(props) {
        //   super(props);
        //   // 绑定this
        //   this.weather = this.weather.bind(this);
        //   this.state = {
        //     isHot: true,
        //   };
        //   console.log(this.hasOwnProperty("weather"));
        // }
        weather = () => {
          console.log("24", this);
          let { isHot } = this.state;
          // state不可以直接修改，要使用setState
          this.setState({
            isHot: !isHot,
          });
        };
        // 必须定义render方法
        render() {
          console.log("29", this);
          return (
            <div>
              <p>天气</p>
              <button onClick={this.weather}>点击</button>
              <div>{this.state.isHot ? "热" : "凉爽"}</div>
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
